<template>
    <div :class="['base-search', show ? 'base-search-active' : '']">
        <div class="base-search-left">
            <el-form inline label-width="100" label-position="left">
                <template v-for="item in props.modelForm" :key="item.prop">
                    <el-form-item :label="item.name">
                        <el-input @keyup.enter="enterSearch" v-if="item.type == 'input'"
                            v-model="localModelProp[item.prop].value" :prefix-icon="Search" :placeholder="'请输入' + item.name">
                        </el-input>
                        <el-input @keyup.enter="enterSearch" v-if="item.type == 'input_number'" type="number"
                            v-model="localModelProp[item.prop].value" :prefix-icon="Search" :placeholder="'请输入' + item.name">
                        </el-input>
                        <el-select v-if="item.type == 'select'" v-model="localModelProp[item.prop].value"
                            :placeholder="'请选择' + item.name" @focus="setSelectOption(item)">
                            <el-option v-for="op in item?.options" :key="op.value" :label="op.label" :value="op.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </template>
            </el-form>
        </div>
        <div class="base-search-right">
            <el-button type="primary" :icon="Search" @click="enterSearch">查询</el-button>
            <el-button type="info" :icon="Delete" @click="enterDelete">清空</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Delete, Search } from '@element-plus/icons-vue';
import { computed, nextTick, ref, watch } from 'vue';
import { useRoute } from 'vue-router';

interface optionsInterface {
    value: string,
    label: string
}
interface modelFormInterface {
    type: string,
    prop: string
    name: string
    options?: optionsInterface[]
}

export interface searchObjectInterface {
    [key: string]: { value: string, like: boolean };
}

interface propsInterface {
    modelForm: modelFormInterface[],
    modelProp: searchObjectInterface,
}
const emits = defineEmits(['update:modelProp', 'enterSearch',
    'enterDelete', 'optionsUpdate'])
const localModelProp = computed({
    get: () => props.modelProp,
    set: (value) => emits('update:modelProp', value)
})

const props = defineProps<propsInterface>()
const show = ref(false)
const route = useRoute()

/**
 * @description 设置搜索框高度
 */
const setSearchHeight = () => {
    nextTick(() => {
        const ele = document.querySelector('.base-search') as HTMLDivElement
        ele.style.maxHeight = ele.scrollHeight + 'px'
        ele.style.height = ele.scrollHeight + 'px'
    })
}
const enterSearch = () => {
    emits('enterSearch',)
}

const enterDelete = () => {
    for (const i in localModelProp.value) {
        localModelProp.value[i].value = ''
    }
    emits('enterDelete')
}

/**
 * @description 设置select的options
 */
const setSelectOption = (info: modelFormInterface) => {
    emits('optionsUpdate', info)
}

watch(route, () => {
    setSearchHeight()
}, {
    deep: true,
    immediate: true
})

</script>